<template>
	<div id="app">
		<el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs" type="border-card">
			<el-tab-pane label="自然人注册" name="first">
				<el-form ref="el-form1" label-width="80px" calss="el-form" :model="formData" :rules="rules">
					<span class="span">账户信息</span>
					<el-form-item label="用户名:" prop="F_Account" class="el-form-item">
						<el-input v-model="formData['F_Account']" placeholder="请输入用户名"  style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="手机号(默认联系人):" prop="F_Telephone">
						<el-input v-model="formData['F_Telephone']" placeholder="请输入手机号" style="margin-top: 15px;boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="密码:" prop="F_Password">
						<el-input v-model="formData['F_Password']" placeholder="请输入密码" type="password" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="确认密码:" prop="confirmpassword">
						<el-input v-model="formData['confirmpassword']" placeholder="再次输入密码" type="password" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<span class="span">企业信息</span>
					<el-form-item label="企业名称:" prop="F_FirmName" class="el-form-item">
						<el-input v-model="formData['F_FirmName']" placeholder="请输入企业名称" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('单位登记所在地')" prop="F_PlaceOfRegistration">
						<avue-select-area v-model="formData['F_PlaceOfRegistration']" :clearable="true" style="boder=1px solid #dcdfe6;">
						</avue-select-area>
					</el-form-item>
					<el-form-item class="" style="width: 60%;text-align: center;">
						<el-button type="primary" @click="submitForm1" class="form-button-center">注册</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="法人注册" name="second">
				<el-form ref="el-form2" label-width="80px" calss="el-form" :model="formData" :rules="rules">
					<span class="span">账户信息</span>
					<el-form-item label="用户名:" prop="F_Account" class="el-form-item">
						<el-input v-model="formData['F_Account']" placeholder="请输入用户名" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="手机号(默认联系人):" prop="F_Telephone">
						<el-input v-model="formData['F_Telephone']" placeholder="请输入手机号" style="margin-top: 15px;boder=1px solid #dcdfe6"></el-input>
					</el-form-item>
					<el-form-item label="密码:" prop="F_Password">
						<el-input v-model="formData['F_Password']" placeholder="请输入密码" type="password" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="确认密码:" prop="confirmpassword">
						<el-input v-model="formData['confirmpassword']" placeholder="再次输入密码" type="password" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('用户类型')" prop="F_UserType">
						<el-select v-model="formData['F_UserType']" placeholder="请选择用户类型" filterable
							clearable style="width:100%;boder=1px solid #dcdfe6;">
							<el-option v-for="(item, index) in F_UserTypeOptions" :key="index"
								:label="item.F_ItemName" :value="item.F_ItemValue" :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
					<span class="span">企业信息</span>
					<el-form-item label="企业名称:" prop="F_FirmName" class="el-form-item">
						<el-input v-model="formData['F_FirmName']" placeholder="请输入企业名称" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('企业logo')" prop="F_FirmLogo">
						<el-upload :action="importUrl" :config="F_FirmLogoConfig" v-model="formData['F_FirmLogo']"
							list-type="picture-card" :before-upload="beforeUpload" :on-success="successUpload"
							accept="image/jpeg, image/png, image/gif" :show-file-list="true">
							<i class="el-icon-upload"></i>
							<div class="el-upload__tip" slot="tip">只能上传图片文件，且不超过2MB</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="统一社会信用代码:" prop="F_CreditCode" class="el-form-item">
						<el-input v-model="formData['F_CreditCode']" placeholder="请输入统一社会信用代码"
							style="margin-top: 15px;boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('单位登记所在地')" prop="F_PlaceOfRegistration">
						<avue-select-area v-model="formData['F_PlaceOfRegistration']" :clearable="true" style="boder=1px solid #dcdfe6;">
						</avue-select-area>
					</el-form-item>
					<el-form-item :label="$t('企业营业执照')" prop="F_BusinessLicense">
						<el-upload :action="importUrl" :config="F_BusinessLicenseConfig"
							v-model="formData['F_BusinessLicense']" list-type="picture-card"
							:before-upload="beforeUpload" :on-success="successUpload2"
							accept="image/jpeg, image/png, image/gif" :show-file-list="true">
							<i class="el-icon-upload"></i>
							<div class="el-upload__tip" slot="tip">只能上传图片文件</div>
						</el-upload>
					</el-form-item>
					<span class="span">法人信息</span>
					<el-form-item label="法人姓名:" prop="F_LegalPersonName" class="el-form-item">
						<el-input v-model="formData['F_LegalPersonName']" placeholder="请输入法人姓名" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('法人证件类型')" prop="F_LegalPersonCertificateType">
						<el-select v-model="formData['F_LegalPersonCertificateType']" placeholder="请选择法人证件类型" filterable
							clearable style="width:100%;margin-top:15px;boder=1px solid #dcdfe6;">
							<el-option v-for="(item, index) in F_LegalPersonCertificateTypeOptions" :key="index"
								:label="item.F_ItemName" :value="item.F_ItemValue" :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码:" prop="F_LegalPersonCertificateNum" class="el-form-item">
						<el-input v-model="formData['F_LegalPersonCertificateNum']" placeholder="请输入证件号码" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="法人手机号:" prop="F_LegalPersonPhone" class="el-form-item">
						<el-input v-model="formData['F_LegalPersonPhone']" placeholder="请输入法人手机号" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item label="法人邮箱:" prop="F_LegalPersonEmail" class="el-form-item">
						<el-input v-model="formData['F_LegalPersonEmail']" placeholder="请输入法人邮箱" style="boder=1px solid #dcdfe6;"></el-input>
					</el-form-item>
					<el-form-item class="" style="width: 60%;text-align: center;">
						<el-button type="primary" @click="submitForm2" class="form-button-center">注册</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
	import authorizeMixin from "@/mixins/authorize";
	import nodeMsgMixin from "@/mixins/nodeMsg";
	import { baseUrl } from "@/config/env";
	import { formValidateNotice } from '@/util/util';		
	import store from "@/store";
	import hideComponentsMixin from "@/mixins/hideComponents"; 
	import request from "@/router/axios";
	export default {
		data() {
			const equalToPassword = (rule, value, callback) => {
				if (this.formData.F_Password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};

			return {
				importUrl: '',
				activeName: 'first',
				filename: '',
				F_LegalPersonCertificateTypeOptions: [],
				F_UserTypeOptions: [],
				formData: {
					'F_Account': '',
					'F_Telephone': '',
					'F_Password': '',
					'confirmpassword': '',
					'F_FirmName': '',
					'F_PlaceOfRegistration': '',
					'F_UserType': '',
					'F_FirmLogo': '',
					'F_CreditCode': '',
					'F_BusinessLicense': '',
					'F_LegalPersonName': '',
					'F_LegalPersonCertificateType': '',
					'F_LegalPersonCertificateNum':'',
					'F_LegalPersonPhone':'',
					'F_LegalPersonEmail':'',

				},
				rules: {
					F_Account: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					}],
					F_Telephone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur',
					}],
					F_Password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					}],
					confirmpassword: [{
							required: true,
							message: '确认密码不能为空',
							trigger: 'blur',
						},
						{
							required: true,
							validator: equalToPassword,
							trigger: 'blur',
						}
					],
					F_UserType: [{
						required: true,
						message: '请选择用户类型',
						trigger: 'change',
					}],
					F_FirmName: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur',
					}],
					F_PlaceOfRegistration: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'change',
					}],
					F_FirmLogo: [{
						required: true,
						message: '上传不能为空',
						trigger: 'change',
					}],
					F_FirmLogoConfig: {
						"showTip": true,
						"fileSize": 2,
						"sizeUnit": "MB",
						"buttonText": "点击上传",
						"disabled": false,
					},
					F_CreditCode: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur',
					}],
					F_BusinessLicense: [{
						required: true,
						message: '上传不能为空',
						trigger: 'change',
					}],
					F_BusinessLicenseConfig: {
						"showTip": true,
						"buttonText": "点击上传",
						"disabled": false,
					},
					F_LegalPersonName: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur',
					}],
					F_LegalPersonCertificateType: [{
						required: true,
						message: '请选择法人证件类型',
						trigger: 'change',
					}],
					
					F_LegalPersonCertificateNum: [{
						required: true,
						message: '请输入证件号码',
						trigger: 'blur',
					}],
					F_LegalPersonPhone: [{
						required: true,
						message: '请输入法人手机号',
						trigger: 'blur',
					}],
					F_LegalPersonEmail: [{
						required: true,
						message: '请输入法人邮箱',
						trigger: 'blur',
					}],
				},
			}
		},
		created() {
			this.importUrl = baseUrl + "/upload/uploadImages";
			this.F_LegalPersonCertificateType();
			this.F_UserType();
		},
		watch: {},
		methods: {
			getFormData() {
			  let key = 'xjr_base_userEntity';
			  let returnParams = {};
			  returnParams[key] = this.formData;
			  return {
			    ...returnParams,
			  };
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isGIF = file.type === 'image/gif';
				if (!isJPG && !isPNG && !isGIF) {
					this.$message.error('只能上传JPG/PNG/GIF格式的图片!');
					return false;
				}
				return true;
			},
			successUpload(res, file) {
				this.formData.F_FirmLogo = res.data.FolderId;
				console.log(this.formData.F_FirmLogo)
				if (res.code === 0) {
					this.$message.success('成功！');
				} else this.$message.error(res.msg);
			},
			successUpload2(res, file) {
				this.formData.F_BusinessLicense = res.data.FolderId;
				console.log(this.formData.F_BusinessLicense)
				if (res.code === 0) {
					this.$message.success('成功！');
				} else this.$message.error(res.msg);
			},
			F_LegalPersonCertificateType() {
				axios({
						url: baseUrl + '/data-items/CertificateType/detail',
						method: 'get',
					}).then(res => {
						this.F_LegalPersonCertificateTypeOptions = res.data.data;
					})
					.catch(error => {
						console.error('数据异常!', error);
					});
			},
			F_UserType() {
				axios({
						url: baseUrl + '/data-items/UserType/detail',
						method: 'get',
					}).then(res => {
						this.F_UserTypeOptions = res.data.data;
					})
					.catch(error => {
						console.error('数据异常!', error);
					});
			},
			// validateForm() {
			//   this.$refs['el-form'].validate(valid => {});
			// },
			// async aysncValidateForm() {
			//   let validataArry = []
			//   let formValidateNotice = function formValidateNotice(obj, that, formAuth) {
			//     for (var o in obj) {
			//       if (!formAuth[o] && obj[o][0]) {
			//         that.$message({
			//           message: obj[o][0].message + ',' + that.$t('noFormAuth'),
			//           type: 'warning'
			//         });
			//         return;
			//       }
			//     }
			//   }
			//   validataArry.push(new Promise((resolve, reject) => {
			//     this.$refs['el-form'].validate((valid, object) => {
			//       if (!this.isWorkflowForm) formValidateNotice(object, this, this.formEnCodeList)
			//       resolve(valid)
			//     })
			//   }))
			//   let res = await Promise.all(validataArry)
			//   if (res.includes(false)) {
			//     return false
			//   }
			//   else {
			//     return true;
			//   }
			// },
			async submitForm1() {
				this.$refs["el-form1"].validate(valid => {
				        if (valid) {
							this.formData.F_UserType = 2;
							let newObj = this.getFormData();
							    request({
							      url: baseUrl + "/t_barin_user_registration",
							      method: "post",
							      data : newObj
							    }).then((res) => {
							      this.submitLoading = false;
							      this.$notify({
							        title: "成功",
							        message: "注册成功",
							        type: "success",
							      });
							       this.$message.success('注册成功！');
												 this.$router.push({
												 	path: "/Login"
												 });
							    });
				        }else{
				          this.$notify({
				            title: "失败",
				            message: "请检查表单",
				            type: "warning",
				          });
				        }
				      });
			  
			   },
			   submitForm2() {
				    this.$refs["el-form2"].validate(valid => {
				           if (valid) {
				             //格式化数据				             
				             let newObj = this.getFormData();
				                 request({
				                   url: baseUrl + "/t_barin_user_registration",
				                   method: "post",
				                   data : newObj
				                 }).then((res) => {
				                   this.submitLoading = false;
				                   this.$notify({
				                     title: "成功",
				                     message: "注册成功",
				                     type: "success",
				                   });
				                    this.$message.success('注册成功！');
				             						this.$router.push({
				             							path: "/Login"
				             						});
				                 });
				           }else{
				             this.$notify({
				               title: "失败",
				               message: "请检查表单",
				               type: "warning",
				             });
				           }
				         });
			     
			      },
			// onChange(file) {
			// 	this.filename = file.name;
			// 	console.log(this.filename)
			// },
		},


	}
</script>
<style scoped>
	::v-deep.el-tabs--border-card {
		background: transparent;

	}

	::v-deep.el-tabs--border-card>.el-tabs__header {
		background-color: transparent;
		border-bottom: none;
		margin-left: 35%;
	}

	::v-deep.el-tabs--border-card>.el-tabs__header .el-tabs__item {
		text-align: center;
		border-radius: 0 0 16px 16px !important;
		background-color: #F3F7FE;
		padding: 4px 20px;
		color: #409EFF;
		line-height: 42px;
		height: 50px;
		width: 192px;
		font-size: 18px;
	}

	::v-deep.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
		background-color: #409EFF;
		color: #ffffff;
	}

	#app {
		width: 100%;
		background-color: #f1f2f4;

	}

	.span {
		font-weight: bold;
		margin-left: 20%;
	}

	.el-tabs {
		width: 60%;
		margin-left: 20%;
		background-color: #FFFFFF;
		box-shadow: none;
		border: none;
	}

	.el-form {
		height: 100%;
		background-color: #FFFFFF;
	}

	.el-form-item {
		width: 60%;
		margin-left: 20%;
		margin-top: 15px;
	}

	.arriveClass {
		width: 20%;
		margin-top: 10px;
	}
	.form-button-center{
		margin-left: 10%;
		width: 400px;
		height: 40px;
		color: #FFF;
		background-color: #409EFF;
		border-color: #409EFF;
	}
	.form-button-center:hover{
		margin-left: 10%;
		width: 400px;
		height: 40px;
		color: #FFF;
		background-color:rgba(64, 158, 255, 0.8);
		border-color: #409EFF;
	}
	.el-input {
    position: relative;
    font-size: 12px;
    display: inline-block;
    width: 100%;
}
    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 27px;
        line-height: 27px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }
	.el-table__empty-block {
	  width: 100% !important;
	}
	
	.avue-form__row {
	  padding: 0 !important;
	}
	
	#editorphone {
	  width: 375px;
	  margin: 0 auto;
	  border: 1px solid #E4E7ED;
	  padding: 0 7.5px;
	  background: #f5f6fa;
	  height: 700px;
	  overflow-y: auto;
	  overflow-x: hidden;
	  border-radius: 5px;
	}
	
	#editorphone .el-col {
	  border-bottom: 1px solid #F2F2F2;
	  background: #fff;
	  margin-bottom: 0;
	  padding: 0 15px 6px !important;
	  width: 100%;
	}
	
	#editorphone .el-form-item__label {
	  line-height: 20px
	}
	
	#editorphone .el-input-group .el-input__inner {
	  background: #f5f6fa
	}
	
	#editorphone .el-input__inner {
	  border: 0
	}
	
	#editorphone .el-input-group__append,
	#editorphone .el-input-group__prepend {
	  border: 0;
	  background: #edeef2;
	  color: #666;
	}
	
	#editorphone .el-input-group .el-input__prefix {
	  left: 44px
	}
	
	#editorphone .el-input-group .el-input__suffix {
	  right: 44px
	}
	
	#editorphone .el-form-item {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  flex-flow: wrap;
	}
	
	#editorphone .el-form-item__label {
	  float: none;
	  min-width: 85px;
	  width: auto !important;
	  text-align: left;
	  flex: auto;
	}
	
	#editorphone .tinymce .el-form-item__label {
	  min-width: 100%;
	}
	
	#editorphone .el-form-item__content {
	  margin-left: 0px !important;
	  flex: auto;
	  width: calc(100% - 95px);
	}
	
	#editorphone .avueFormNoLable .el-form-item__label,
	#editorphone .avueFormNoLable .avue-crud__pagination {
	  display: none;
	}
	
	#editorphone .avueFormNoLable .el-collapse-item__wrap,
	#editorphone .avueFormNoLable .el-collapse {
	  border-bottom: 0
	}
	
	#editorphone .avueFormNoLable .el-col {
	  border-bottom: 0;
	  padding-bottom: 0
	}
	
	#editorphone .el-form-item__content .el-button:first-child {
	  margin-left: 90px;
	}
</style>
